<!DOCTYPE HTML>
<html xmlns:th="https://www.thymeleaf.org">
<head>
    <title>Spring Statemachine Demo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
</head>
<body>
<div class="container marketing">

    <div class="row">
        <form th:action="@{/add}">
            <div class="input-group mb-3">
                <input type="text" class="form-control" placeholder="状态机id" name="machineId">
                <div class="input-group-append">
                    <button class="btn btn-outline-secondary" type="submit">添加</button>
                </div>
            </div>
        </form>
    </div>

    <div class="row">
        <h2>状态机列表</h2>
        <div class="table-responsive">
            <table class="table table-striped table-sm">
                <tr>
                    <th>状态机id</th>
                    <th>当前状态</th>
                    <th>操作</th>
                </tr>
                <tr th:each="sm : ${stateMachines}">
                    <td>[[${sm.machineId}]]</td>
                    <td>[[${sm.state}]]</td>
                    <td>
                        <a class="btn btn-dark btn-sm" th:href="@{/commute(machineId=${sm.machineId})}" role="button">
                            通勤
                        </a>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</div>

</body>
<script th:src="@{/js/bootstrap.bundle.min.js}"></script>
</html>
